<template>
  <r-operator
    class="head"
    :operators="['setting']"
    @setting="isShowSetting = !isShowSetting"
    @click="uploadHead"
  >
    <div class="head__sex"></div>
    <img class="head__img" :src="headUrl" />

    <!--更改头像格式-->
    <div
      v-show="isShowSetting"
      class="head__setting"
      @mouseleave="isShowSetting = !isShowSetting"
    ></div>
  </r-operator>
</template>

<script>
import ROperator from "@/components/base/ROperator";
import { ref, computed } from "vue";
import useData from "../useData";

export default {
  name: "Head",
  components: {
    ROperator,
  },
  props: {
    id: [String, Number],
  },
  setup(props) {
    const isShowSetting = ref(false);
    const { dataList } = useData(props.id);
    const headUrl = computed(() => {
      const { img } = dataList;
      return img;
    });
    const uploadHead = () => {};
    return {
      isShowSetting,
      headUrl,
      uploadHead,
    };
  },
};
</script>

<style scoped lang="less">
.head {
  position: relative;
  cursor: pointer;
  width: 142px;
  padding-left: 20px;
  height: 140px;
  overflow: hidden;

  &__sex {
  }

  &__img {
    width: 102px;
    height: 120px;
  }
}
</style>
